<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <meta name='viewport' content='user-scalable=no,initial-scale=2.0' />
    <style>
        body {
            background: #000;
            color: #fff;
            text-align: center
        }
        div {
            margin: 10px
        }
    </style>
</head>
<body>
    <div>
        <h3>Pick An Emoji</h3> <img id='emojis' onclick='clickEmoji(event);'
            src=''>
    </div>
    <div>
        <p id='out'></p> <canvas id='emoji' width='8' height='8'></canvas>
    </div>
    <div>
        <button onclick='modeChange()'>模式切换</button>
        <button onclick='brightnessChange()'>亮度调节</button>
        <button onclick='colorChange()'>颜色变更</button>
        <button onclick='statusSave()'>配置保存</button>
        <button onclick='clockChange()'>时钟样式</button>
    </div>
    <script>
    function nw() { return new WebSocket('ws://' + location.hostname + ':81/', ['arduino']); } var ws = nw(); 
    var sk = 0;
    function cc(c) { return String.fromCharCode(c / 2); }
    function clickEmoji(e) { 
        var xo = 3; var yo = 3; var xs = 13; var ys = 12; var x = e.offsetX; var y = e.offsetY; 
        var c = Math.round((x - xo - 4) / xs); 
        var r = Math.round((y - yo - 4) / ys); 
        document.getElementById('out').innerText = 'Selected [' + c + ', ' + r + ']'; 
        var img = document.getElementById('emojis'); 
        var ce = document.getElementById('emoji'); 
        var ctx = ce.getContext('2d'); 
        ctx.drawImage(img, -(xo + (xs * c)), -(yo + (ys * r)), 131, 122);
        var d = ctx.getImageData(0, 0, 8, 8).data; 
        var t = ''; 
        for (var i = 0; i < 8; i++)
        {
            for(var j = 0; j < 8; j++){
                var imageData = ctx.getImageData(j, i, 1, 1).data;
                t += cc(imageData[0]);
                t += cc(imageData[1]);
                t += cc(imageData[2]);
            }
        }
        ws.send(t, { binary: true }); }
        function modeChange(){
            console.log('切换模式');
            ws.send('l');
        }
        function brightnessChange(){
            console.log('亮度调节');
            ws.send('b');
        }
        function colorChange(){
            console.log('颜色变更');
            ws.send('c');
        }
        function statusSave(){
            console.log('保存配置');
            ws.send('s');
        }
        function clockChange(){
            console.log('时钟样式');
            ws.send('cc');
        }
    </script> 
</body> 
</html>